<template>
    <div class="leftMenu" >
        <div class="mentItem" @click="goTargetMenu(item)" v-for="(item, index) in leftMenuList"
            :class="{ 'activeMenuItem': currentMenuTitle == item.name }">
            <div class="iconCircle">
                <img :src="currentMenuTitle == item.name ? item.activeImgUrl : item.imgUrl" alt="">
            </div>
            <div class="menuName">{{ item.name }}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'index',
    props: {},
    components: {},
    data() {
        return {
            leftMenuList: [
                { name: '聊天', imgUrl: require('@/assets/images/Slice 5.png'), activeImgUrl: require('@/assets/images/Slice 5(1).png'), path: '/chatMessage' },
            ],
        }
    },
    computed: {
        currentMenuTitle() {
            return this.$route.meta.title
        },
    },
    watch: {},
    methods: {
        goTargetMenu(item){
            this.$router.push({path: item.path})
        }
    },
    beforeCreate() {
    },
    created() {
        console.log(this.currentMenuTitle);
    },
    beforeMount() {
    },
    mounted() {
    },
    beforeUpdate() {
    },
    updated() {
    },
    activated() {
    },
    deactivated() {
    },
    beforeDestroy() {
    },
    destroyed() {
    }
}
</script> 
<style scoped lang='less'>
.leftMenu {
    width: 60px;
    padding: 10px 5px;
    overflow-y: auto;
    height: 100%;
    background-color: var(--headerBgColor);
    &::-webkit-scrollbar {
        width: 0px;
    }
    .mentItem{
        color: #fff;
        cursor: pointer;
        margin-top: 10px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .iconCircle{
            width: 40px;
            height: 40px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .menuName{
            margin-top: 3px;
            font-size: 14px;
        }
    }
    .activeMenuItem{
        color: #1163a2;
    }
}
</style>
